<template>
  <div class="home">
    <!-- cubeic-back -->
    <!-- <header class="header" > <i class="cubeic-back"></i> <h1>北上资金</h1> </header> -->
    <!-- <com-header :title="'北上资金'" ></com-header> -->
    <!-- <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" /> -->
  <!-- 1、陆股通 -->
<aside class="lgt" v-show="current=='陆股通'">

        <h2 class="title"> <span>{{bkzd.date}}</span>北向资金流向陆股通（各版块资金限额520亿） </h2>
        <div class="ibox">
          <div class="ibox-content">
           <div class="table-responsive" >
              <table class="table table-striped">
                <tbody>
                  <tr class="">
                          <td class="col" v-for="(item,index) in bkzd.head" :key="index">{{item}}</td>
                  </tr>
                  <tr class=" row-item" v-for="(child,index) in bkzd.data" :key="index" >
                      <td v-for="(citem,cindex) in  child" class="col" :key="cindex">
                            <span v-if="cindex>4" :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem}}</span> 
                            <span v-else> {{citem}}</span>
                        </td>
                  </tr>
                  </tbody>
              </table>
          </div>
          </div>
     </div>
  </aside>
  <!-- 2、沪深股 -->
   <aside class="lgt" >
        <h2 class="title"><span>{{lgtsdcj.date}}</span>北上资金净买入前10沪深股(按资金成交额排名) </h2>
        <div class="ibox">
          <div class="ibox-content">
           <div class="table-responsive" >
              <table class="table table-striped">
                <tbody>
                 <tr class="">
                          <td class="col" v-for="(item,index) in lgtsdcj.head" :key="index">
                                <span v-if="index>3">{{item.slice(0,3)}}<br> {{item.slice(3,item.length)}}</span>
                                <span v-else>{{item}}</span>
                          </td>
                  </tr>
                  <tr class=" row-item" v-for="(child,index) in lgtsdcj.data" :key="index" >
                      <td v-for="(citem,cindex) in  child" class="col" :key="cindex" >
                        <span v-if="cindex==2">{{citem}}元</span> 
                        <span v-else-if="cindex==3"  :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem | formatFloat(2)}}%</span>
                        <span v-else-if="cindex>=4" :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem|numberFormat}}</span>
                        <span v-else>{{citem}}</span> 
                      </td>
                  </tr>
                  </tbody>
              </table>
          </div>
          </div>
     </div>
  </aside>

  <!-- 3、港股通（沪） -->
   <aside class="lgt" >
        <h2 class="title"><span>{{ggtHsdcj.date}}</span>港股通（沪）十大成交股（按资金成交额排名）</h2>
        <div class="ibox">
          <div class="ibox-content">
           <div class="table-responsive" >
              <table class="table table-striped">
                <tbody>
                <tr class="">
                          <td class="col" v-for="(item,index) in ggtHsdcj.head" :key="index">
                               <span v-if="index>3">{{item.slice(0,3)}}<br> {{item.slice(3,item.length)}}</span>
                                <span v-else>{{item}}</span>
                          </td>
                  </tr>
                  <tr class=" row-item" v-for="(child,index) in ggtHsdcj.data" :key="index" >
                      <td v-for="(citem,cindex) in  child" class="col" :key="cindex">
                              <span v-if="cindex==2">{{citem}}元</span> 
                              <span v-else-if="cindex==3"  :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem | formatFloat(2)}}%</span>
                              <span v-else-if="cindex>=4" :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem|numberFormat}}</span>
                              <span v-else>{{citem}}</span> 
                      </td>
                  </tr>
                  </tbody>
              </table>
          </div>
          </div>
     </div>
  </aside>
  <!-- 4、港股通（深） -->
   <aside class="lgt" >
        <h2 class="title"><span>{{ggtSsdcj.date}}</span>港股通（深）十大成交股（按资金成交额排名）</h2>
        <div class="ibox">
          <div class="ibox-content">
           <div class="table-responsive" >
              <table class="table table-striped">
                <tbody>
                        <tr class="">
                          <td class="col" v-for="(item,index) in ggtSsdcj.head" :key="index">
                            <span v-if="index>3">{{item.slice(0,3)}}<br> {{item.slice(3,item.length)}}</span>
                                <span v-else>{{item}}</span>
                          </td>
                  </tr>
                  <tr class=" row-item" v-for="(child,cindex) in ggtSsdcj.data" :key="cindex" >
                      <td v-for="(citem,cindex) in  child" class="col" :key="cindex">
                              <span v-if="cindex==2">{{citem}}元</span> 
                              <span v-else-if="cindex==3"  :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem | formatFloat(2)}}%</span>
                              <span v-else-if="cindex>=4" :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem|numberFormat}}</span>
                              <span v-else>{{citem}}</span> 
                      </td>
                  </tr>
                  </tbody>
              </table>
          </div>
          </div>
     </div>
  </aside>


 <!-- 4、港股通（深） -->
  <aside class="lgt" >
        <h2 class="title"><span>{{ggzj.date}}</span>A股市场资金流入前10个股</h2>
        <div class="ibox">
          <div class="ibox-content">
           <div class="table-responsive" >
              <table class="table table-striped">
                <tbody>
                      <tr class="">
                          <td class="col" v-for="(item,index) in ggzj.head" :key="index">{{item}}</td>
                  </tr>
                  <tr class=" row-item" v-for="(child,index) in ggzj.data" :key="index" >
                      <td v-for="(citem,cindex) in  child" class="col" :key="cindex">
                            <span v-if="cindex==2">{{citem}}元</span> 
                            <span v-else-if="cindex>=3" :class="[citem.toString().indexOf('-')>-1?'static':'red']">{{citem}}</span> 
                            <span v-else>{{citem}}</span> 
                        </td>
                  </tr>
                  </tbody>
              </table>
          </div>
          </div>
     </div>
  </aside>

  </div>
</template>

<script>
import comHeader from '@/components/Header.vue'
export default {
  name: 'home',
    components: {
      comHeader
  },
  data(){
    return{
       bkzd:{},
       lgtsdcj:{},
       ggtHsdcj:{},
       ggtSsdcj:{},
       ggzj:{},
       current: '陆股通',
            labels: [
              '陆股通',
              '沪深股',
              '港股通（沪）',
              '港股通（深）',
              '资金流入',
            ]
    }
  },
    created(){
           this.bkzdFun()
           this.lgtsdcjFun()  
           this.ggtHsdcjFun()  
           this.ggtSsdcjFun()
           this.ggzjFun()
        },
    methods: {
      bkzdFun(){
               this.axios({
                    url:'api/market/lggt/bkzd',//南北向资金流入版块涨跌
                    method:'get',
                })
                .then(res=>{
                     console.log(res)
                     this.bkzd=res.data
                })
                .catch(error=>{
                    console.log(error)
                })
      },
      lgtsdcjFun(){// 陆股通十大成交股 lggt/ggtHsdcj
            this.axios({
                    url:'api/market/lggt/lgtsdcj',//南北向资金流入版块涨跌
                    method:'get',
                })
                .then(res=>{
                     console.log(res)
                     this.lgtsdcj=res.data
                })
                .catch(error=>{
                    console.log(error)
                })
      },
           ggtHsdcjFun(){// 港股通（沪）十大成交股
            this.axios({
                    url:'api/market/lggt/ggtHsdcj',//南北向资金流入版块涨跌
                    method:'get',
                })
                .then(res=>{
                     console.log(res)
                     this.ggtHsdcj=res.data
                })
                .catch(error=>{
                    console.log(error)
                })
      },
              ggtSsdcjFun(){// 港股通（沪）十大成交股
            this.axios({
                    url:'api/market/lggt/ggtSsdcj',//南北向资金流入版块涨跌
                    method:'get',
                })
                .then(res=>{
                     console.log(res)
                     this.ggtSsdcj=res.data
                })
                .catch(error=>{
                    console.log(error)
                })
      },
                  ggzjFun(){// 港股通（沪）十大成交股
            this.axios({
                    url:'api/market/zijin/ggzj',//南北向资金流入版块涨跌
                    method:'get',
                })
                .then(res=>{
                     console.log(res)
                     this.ggzj=res.data
                })
                .catch(error=>{
                    console.log(error)
                })
      },
    changeHandler(cur) {
      this.current = cur
    }
  }
}
</script>
<style lang="less" scoped>
.lgt{
  .title{
     color: black;
     font-weight: bold;
     span{
       color: #ff8036;
     }
  }
}
    .home{ 
      font-size: 14px;
        padding-top: 10px;
          .box{
       padding: 0 10px;
    }
    }

    .ibox{
           clear: both;
    margin-top: 0;
    padding: 0;
      .ibox-content{
         background-color: #ffffff;
    color: inherit;
    padding: 10px;
    border-color: #e7eaec;
    border-image: none;
    //border-style: solid solid none;
    border-width: 1px 0;
      }
    }
 .table-responsive {
     width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
     border: .5px solid #dddddd;
    }
    .table-striped{
       >tbody{
         >tr:nth-of-type(odd){
           background-color: #f9f9f9;
          
         }
       }
    }
    .table{
          width: 100%;
          max-width: 100%;
         tr{
                white-space: nowrap;
                 .static{
                    color:green;
                  }
                  .red{
                      color: red;
                  }
           td{
                 white-space: nowrap;
                 border-top: 1px solid #e7eaec;
              line-height: 1.42857;
              padding: 5px;
              vertical-align: middle;
              .info{
                color: #666;
                font-size: 12px
              }
           }
         }
    }
</style>